<template>
    <a-modal :title="$t('Create') + $t('Block')" v-model='osdcreate' @cancel='cancelhandle' width='35%' @ok='subnew'
        :cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
        <a-spin size="large"
            style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%"
            tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
        <a-form :form='form'>
            <a-form-item :label="$t('Block-name')" v-bind='formlayout' has-feedback>
                <a-input v-decorator="['name', {
                    rules: [{ required: true, message: $t('Enter') + $t('Block-name') },
                    { pattern: namePattern, message: $t('Not_enter_special_characters') }]
                }]" :placeholder="$t('Enter') + $t('Block-name')">
                </a-input>
            </a-form-item>
            <a-form-item :label="$t('Own-pool')" v-bind="formlayout">
                <a-select v-decorator="['pool',
                    {
                        rules: [{ required: true, message: $t('Choose') + $t('Own-pool') }]
                    }]" :placeholder="$t('Choose') + $t('Own-pool')" @change="changeOwnPool">
                    <!-- <a-select-option v-for="(item,index) in $store.state.baseblock.rbd_pool" :value='item' :key="index"> -->
                    <a-select-option v-for="item in $store.state.baseblock" :value='item.poolnum' :key="item.poolname">
                        {{ item.poolname }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <!--专用数据存储池-->
            <!-- <a-form-item label='' v-bind="formlayout">
                <a-row>
                    <a-col :span='18' :offset='10'>
                        <a-checkbox :checked="checked" @change="onChange" v-decorator="['special',{
                    initialValue:false}]">
                            {{$t('Use')}}{{$t('Dedicated')}}
                        </a-checkbox>
                    </a-col>
                </a-row>
            </a-form-item>
            <a-form-item :label="$t('Data-pool')" v-bind="formlayout" v-if='form.getFieldValue("special")'>
                <a-select v-decorator="['data_pool',{
                    rules:[{required:true,message:$t('Choose')+$t('Dedicated')}]
                }]" :placeholder="$t('Choose')+$t('Dedicated')">
                    <a-select-option v-for="item in $store.state.baseblock.data_pool" :value='item'>
                       {{item}}
                    </a-select-option>  
                </a-select>
            </a-form-item> -->
            <a-form-item :label="$t('Block-size')" v-bind='formlayout'>
                <a-row :gutter="16">
                    <a-col :span='12'>
                        <!-- <a-input-number  :min='1' :placeholder="$t('E-g')+'10'">
                        </a-input-number> -->
                        <a-select v-decorator="['size', {
                            rules: [{ required: true, message: $t('Enter') + $t('Block-size') },
                            { validator: objchecknum }]
                        }]" :placeholder="$t('Choose') + $t('Block-size')">
                            <a-select-option v-for='(item, index) in blockSizeData' :value="item"
                                :key='index'>{{ item }}</a-select-option>
                        </a-select>
                    </a-col>
                    <a-col :span='12'>
                        <a-select v-decorator="['unit', {
                            rules: [{ required: true, message: $t('Enter') + $t('Unit') }, {
                                validator: objchecknum
                            }]
                        }]" :placeholder="$t('Choose') + $t('Unit')">
                            <a-select-option v-for='u in unit ' :key='u.val'>{{ u.label }}</a-select-option>
                        </a-select>
                    </a-col>
                </a-row>
            </a-form-item>
            <a-form-item :label="$t('Features-set')" v-bind="formlayout">
                <a-checkbox-group @change="onCheckbox" v-decorator="['features', {
                    initialValue: defaultCheckBox
                }]">
                    <a-row>
                        <a-col :span="24"><a-checkbox disabled value="layering">{{ $t('layering') }}</a-checkbox></a-col>
                        <a-col :span="24"><a-checkbox disabled
                                value="exclusive-lock">{{ $t('exclusive-lock') }}</a-checkbox></a-col>
                        <a-col :span="24"><a-checkbox value="deep-flatten">{{ $t('deep-flatten') }}</a-checkbox></a-col>
                        <a-col :span="24"><a-checkbox @change="onCheckobjmap"
                                value="object-map">{{ $t('Object-map') }}</a-checkbox></a-col>
                        <a-col :span="24"><a-checkbox :disabled="checked_map"
                                value="fast-diff">{{ $t('fast-diff') }}</a-checkbox></a-col>
                        <a-col :span="24"><a-checkbox value="journaling">{{ $t('journaling') }}</a-checkbox></a-col>
                    </a-row>
                </a-checkbox-group>
            </a-form-item>
            <a-button style="float:right;" @click="onChangeAdv" v-if="adv == false"
                type="link">{{ $t('Advanced') }}</a-button>
            <br v-if="adv == false" />
            <a-button v-if="adv == true" @click="onChangeAdv" type="link"
                size="large">{{ $t('Advanced') }}</a-button><!--style="color:#000"-->
            <a-checkbox v-if="adv == true" v-model="isShowStrip">{{ $t('Striping') }}</a-checkbox>
            <a-checkbox v-if="adv == true" v-model="isShowVolumePriority">{{ $t('Volume-priority') }}</a-checkbox>
            <!--分片-->
            <p v-if="isShowStrip == true && adv == true" style="padding-left:1em">{{ $t('Striping') }}</p>
            <a-form-item v-if="isShowStrip == true && adv == true" :label="$t('Object-size')" v-bind="formlayout">
                <a-select v-decorator="['obj_size', {
                    rules: [{ required: true, message: $t('Choose') + $t('Object-size') }, {
                        validator: objchecknum
                    }]
                }]" style="width: 100%" :placeholder="$t('Choose') + $t('Object-size')"
                    @change="handleChangeObjSize">
                    <a-select-option v-for="(i, index) in objdata" :value="i.value"
                        :key="index">{{ i.label }}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item v-if="isShowStrip == true && adv == true" :label="$t('Stripe-unit')" v-bind="formlayout">
                <a-select v-decorator="['stripe_unit', {
                    rules: [{ required: true, message: $t('Choose') + $t('Stripe-unit') }, {
                        validator: objchecknum
                    }]
                }]" style="width: 100%" :placeholder="$t('Choose') + $t('Stripe-unit')"
                    @change="handleChangeStripeSize">
                    <a-select-option v-for="(i, index) in objdata2" :value="i.value"
                        :key="index">{{ i.label }}</a-select-option>
                </a-select>
            </a-form-item>
            <!--设置卷优先级-->
            <p v-if="isShowVolumePriority == true && adv == true" style="padding-left:1em">{{ $t('Set-volume-priority') }}</p>
            <a-form-item v-if="isShowVolumePriority == true && adv == true" :label="$t('Select-strategy')"
                v-bind="$store.state.language == 'zh' ? formlayout : formlayout2">
                <a-select v-decorator="['strategy', {
                    rules: [{ required: true, message: $t('Choose') + $t('Strategy') }]
                }]" style="width: 100%"
                    :placeholder="$t('Strategy-tip')" allowClear>
                    <!-- @change="handleChangeStripeSize" -->
                    <a-select-option v-for="item in strategyData" :value="item.id" :key="item.id">
                        <!-- 策略ID，创建时间，创建人，策略标识符 -->
                        {{ idFormat(item.id) }}，{{ item.create_time }}，{{ item.username }}，{{ item.identifier }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <!-- <a-form-item v-if="adv == true" :label="$t('Stripe-count')" v-bind="formlayout">
                <a-input-number style="width: 100%" v-decorator="['stripe_count',{
                    rules:[{required:true,message:$t('Enter')+$t('Stripe-count')},{validator: objchecknum}]
                }]" :min='1' :placeholder="$t('Enter')+$t('Stripe-count')"></a-input-number>
            </a-form-item> -->
        </a-form>
    </a-modal>
</template>
<script>
import { idFormat } from '@/untils/formatMethods'
import request from '@/request/request'

export default {
    name: 'cosd',
    props: ['cc', 'strategyData'],
    data() {
        return {
            form: this.$form.createForm(this),
            osdcreate: false,
            formlayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 17 }
            },
            formlayout2: {
                labelCol: { span: 8 },
                wrapperCol: { span: 15 }
            },
            checked: false,
            unit: [{ val: 'KiB', label: 'KiB' }, { val: 'MiB', label: 'MiB' }, { val: 'GiB', label: 'GiB' }, { val: 'TiB', label: 'TiB' }],
            spinning: false,
            objdata: [
                { value: 4 * 1024, label: '4 KiB' },
                { value: 8 * 1024, label: '8 KiB' },
                { value: 16 * 1024, label: '16 KiB' },
                { value: 32 * 1024, label: '32 KiB' },
                { value: 64 * 1024, label: '64 KiB' },
                { value: 128 * 1024, label: '128 KiB' },
                { value: 256 * 1024, label: '256 KiB' },
                { value: 512 * 1024, label: '512 KiB' },
                { value: 1 * 1024 * 1024, label: '1 MiB' },
                { value: 2 * 1024 * 1024, label: '2 MiB' },
                { value: 4 * 1024 * 1024, label: '4 MiB' },
                { value: 8 * 1024 * 1024, label: '8 MiB' },
                { value: 16 * 1024 * 1024, label: '16 MiB' },
                // {value:32*1024*1024,label:'32 MiB'},
            ],
            objdata2: [
                { value: 4 * 1024, label: '4 KiB' },
                { value: 8 * 1024, label: '8 KiB' },
                { value: 16 * 1024, label: '16 KiB' },
                { value: 32 * 1024, label: '32 KiB' },
                { value: 64 * 1024, label: '64 KiB' },
                { value: 128 * 1024, label: '128 KiB' },
                { value: 256 * 1024, label: '256 KiB' },
                { value: 512 * 1024, label: '512 KiB' },
                { value: 1 * 1024 * 1024, label: '1 MiB' },
                { value: 2 * 1024 * 1024, label: '2 MiB' },
                { value: 4 * 1024 * 1024, label: '4 MiB' },
                { value: 8 * 1024 * 1024, label: '8 MiB' },
                // {value:16*1024*1024,label:'16 MiB'},
                // {value:32*1024*1024,label:'32 MiB'},
            ],
            objdata_copy: [],
            objdata2_copy: [],
            blockSizeData: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
            defaultCheckBox: ['layering', 'exclusive-lock', 'deep-flatten', 'object-map', 'fast-diff'],
            checked_map: false,
            adv: false,
            isShowStrip: true,
            isShowVolumePriority: true,
            targetOwnPoolName: ''
        }
    },
    watch: {
        cc(val) {
            this.osdcreate = val
        }
    },
    methods: {
        cancelhandle(e) {
            // this.osdcreate=false
            this.$emit('omodal', false, true)
            this.form.resetFields();
            this.checked = false
            this.adv = false
            this.spinning = false
            this.targetOwnPoolName = '';
        },
        subnew(e) {
            e.preventDefault();
            this.form.validateFields((err, value) => {
                if (!err) {
                    this.spinning = true
                    request('put', 'block/', {
                        name: value.name, //块设备名称
                        pool_id: value.pool, //所属池名称的id
                        size: value.size,    //块大小
                        unit: value.unit,       //单位
                        features: value.features,
                        advanced: {
                            obj_size: value.obj_size,
                            stripe_unit: value.stripe_unit,
                            strategy_id: value.strategy// 卷优先级
                            // stripe_count: value.stripe_count,
                        },
                        pool: value.pool,
                        special: value.special,
                        pool_name: this.targetOwnPoolName,
                    }).then(res => {
                        this.model(res.data.id) //返回模板
                        this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                        // this.gettask()  //任务栏信息
                        this.spinning = false
                        // this.osdcreate = false
                        this.form.resetFields() //重置弹窗
                        this.$emit('omodal', false, false) //关闭弹窗
                        this.checked = false
                        this.adv = false
                        this.$store.commit('toGetBlockData', !this.$store.state.isBlockListChange);
                    }).catch(err => {
                        this.spinning = false;
                        this.form.resetFields(); //重置弹窗
                        this.$emit('omodal', false, false); //关闭弹窗
                        this.checked = false;
                        this.adv = false;
                    })
                }
            })
        },
        onChange(checkedValues) {
            this.checked = !this.checked // console.log('checked = ', checkedValues);
        },
        onCheckbox(checkedValues) {
            if (this.checked_map) { //如果obj_map不被选中的话，fast-diff也不能选
                let index = checkedValues.indexOf('fast-diff')
                if (index > -1) {
                    checkedValues.splice(index, 1)
                }
            }
        },
        onCheckobjmap() {
            this.checked_map = !this.checked_map
        },
        objchecknum(rule, value, callback) { //对象大小*条带数不能大于块设备大小
            const form = this.form;
            const unitMultipliers = {
                'KiB': 1024,
                'MiB': 1024 * 1024,
                'GiB': 1024 * 1024 * 1024,
                'TiB': 1024 * 1024 * 1024 * 1024
            };
            let block_size = form.getFieldValue('size')
            const unit = form.getFieldValue('unit');
            if (block_size > -1 && unit) {
                if (unit in unitMultipliers) {
                    block_size *= unitMultipliers[unit];
                }
                // switch (form.getFieldValue('unit')) {
                //     case 'KiB': block_size = block_size * 1024; break;
                //     case 'MiB': block_size = block_size * 1024 * 1024; break;
                //     case 'GiB': block_size = block_size * 1024 * 1024 * 1024; break;
                //     case 'TiB': block_size = block_size * 1024 * 1024 * 1024 * 1024; break;
                // }
                // if ((form.getFieldValue('obj_size')*form.getFieldValue('stripe_count') > block_size) == true) {
                //     callback('对象大小*条带数量 不能大于块设备大小');
                // }
                if (form.getFieldValue('stripe_unit') > form.getFieldValue('obj_size')) {
                    callback(this.$t('Stripe-size-limit'));
                    // callback('条带大小不能大于对象大小');
                } else {
                    callback();
                }
            } else if (form.getFieldValue('stripe_unit') > form.getFieldValue('obj_size')) {
                callback(this.$t('Stripe-size-limit'));
            } else {
                callback();
            }
        },
        onChangeAdv() {
            this.adv = !this.adv;
            if (!this.adv) {
                this.objdata = this.objdata_copy;
                this.objdata2 = this.objdata2_copy;
            }
        },
        //高级设置中，对象大小改变，条带大小的数据调整为只有小于当前对象大小数值的数据
        handleChangeObjSize(value) {
            this.objdata2 = this.objdata2_copy.filter(item => {
                return item.value < value;
            })
        },
        //高级设置中，条带大小改变，对象大小的数据调整为只有大于当前条带大小数值的数据
        handleChangeStripeSize(value) {
            this.objdata = this.objdata_copy.filter(item => {
                return item.value > value;
            })
        },

        //将id变成4位数 0001 0010 0100 1000
        idFormat(value) {
            return idFormat(value);
        },

        //改变所属存储池
        changeOwnPool(value) {
            this.$store.state.baseblock.some(item => {
                if (item.poolnum == value) {
                    this.targetOwnPoolName = item.poolname;
                    return true;
                }
            })
        },
    },
    mounted() {
        this.checked = false;
        this.objdata_copy = this.objdata;
        this.objdata2_copy = this.objdata2;
    }
}
</script>
<style scoped>
.ant-form-item {
    margin-bottom: 1em;
}

::v-deep.ant-modal-body {
    max-height: 450px;
    overflow: auto;
}

@media screen and (min-width:1920px) {
    ::v-deep.ant-modal-body {
        max-height: 600px;
    }
}</style>